import React from 'react';
import styles from './PopoverContent.module.css';
import { SearchOutlined } from '@ant-design/icons';

interface PopoverContentProps {
  data: {
    searchPlaceholder: string;
    images: Array<{
      src: string;
      text: string;
    }>;
    categories: Array<{
      title: string;
      items: string[];
    }>;
  };
}
const PopoverContent: React.FC<PopoverContentProps> = ({ data }) => {
  return (
    <div className={styles.container}>
      {/* 搜索框 */}
      <div className={styles.searchWrapper}>
        <SearchOutlined className={styles.searchIcon} />
        <input
          type="text"
          placeholder={data.searchPlaceholder}
          className={styles.searchInput}
        />
      </div>

      {/* 图片展示区 */}
      <div className={styles.imageGrid}>
        {data.images.map((image, index) => (
          <div key={index} className={styles.imageItem}>
            <img src={image.src} alt={image.text} />
            <span>{image.text}</span>
          </div>
        ))}
      </div>

      {/* 分类列表 */}
      <div className={styles.categoryGrid}>
        {data.categories.map((category, index) => (
          <div key={index} className={styles.categoryColumn}>
            <h3>{category.title}</h3>
            <ul>
              {category.items.map((item, itemIndex) => (
                <li key={itemIndex}>{item}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
};

export default PopoverContent; 